/*
* @Author: majingyu
* @Date:   2017-04-24 17:49:42
* @Last Modified by:   majingyu
* @Last Modified time: 2017-06-13 19:33:01
*/

import React from 'react';
import 'css/components/header.less';

import { connect } from 'react-redux';
import { changeNowPageWithHeaderState,changeShowStatus } from 'action/app';


const selectTab = (state) => {
    return {
        app:state.app
    }
}
class bottomTab extends React.Component{
    constructor(props){
        super(props);
    }
    isActive(page){
        return page === this.props.app.mainNowPage ? 'active' : '';
    }
    toPage(page){
        this.changeShow(false);
        window.location.href = '#/'+page;
        this.props.toPage(page);
    }
    changeShow(status){
        this.props.changeShowStatus(status)
    }
    render(){
        return (
            <div className="bottom-tab">
                <ul className="bottom-tabs">
                    <li className={this.isActive('nearby')} onClick={()=>{this.toPage('nearby')}}>
                        <img className="tab-img" src="/image/near.png"/>
                        <p className="tab-text">附近</p>
                    </li>
                    <li className={this.isActive('main')} onClick={()=>{this.toPage('main')}}>
                        <img className="tab-img" src="/image/index.png"/>
                        <p className="tab-text">首页</p>
                    </li>
                    <li className={this.isActive('publish')} onClick={()=>{this.changeShow(true)}}>
                        <img className="tab-img" src="/image/publish.png"/>
                        <p className="tab-text">发布</p>
                    </li>
                    <li className={this.isActive('order')} onClick={()=>{this.toPage('orders')}}>
                        <img className="tab-img" src="/image/orders.png"/>
                        <p className="tab-text">订单</p>
                    </li>
                    <li className={this.isActive('mine')} onClick={()=>{this.toPage('mine')}}>
                        <img className="tab-img" src="/image/wode.png"/>
                        <p className="tab-text">我的</p>
                    </li>
                </ul>
            </div>
        )
    }
}

let dispatchHandle = (dispatch, getState) => {
    return {
       toPage(page){
           dispatch(changeNowPageWithHeaderState(page));
       },
       changeShowStatus(status){
           dispatch(changeShowStatus(status));
       } 
    }
    
}

let visibileBottomTab = connect(selectTab, dispatchHandle)(bottomTab);
export default visibileBottomTab;